.filter {
  background-color: #fff;
  .filter_main {
    z-index: 1001;
    position: relative;
    background-color: #fff;
    .filter_title {
      display: flex;
      height: 40* 0.3125vw;
      align-items: center;
      justify-content: space-around;
      border-bottom: 1* 0.3125vw solid #eee;
      .title_item {
        font-size: 14* 0.3125vw;
      }
      .active {
        color: #21b97a;
      }
    }

    .filter_content {
      /* 1到3 筛选组件 */
      .main_pickerview {
        .picker_btn {
          border-top: 1* 0.3125vw solid #ccc;
          border-bottom: 1* 0.3125vw solid #ccc;
          height: 45* 0.3125vw;
          display: flex;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          span:nth-child(1) {
            color: #21b97a;
            flex: 1;
          }
          span:nth-child(2) {
            flex: 3;
            background-color: #21b97a;
            color: #fff;
          }
        }
      }
      /* 第四个筛选组件 */
      .other_content {
        display: flex;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 1000;
        .other_mask {
          flex: 1;
          background-color: #000;
          opacity: 0.5;
        }

        .other_main {
          flex: 5;
          display: flex;
          flex-direction: column;
          background-color: #fff;
          .other_main_top {
            flex: 1;
            overflow: auto;
            padding: 15* 0.3125vw;
            .other_group {
              border-bottom: 1* 0.3125vw solid #ccc;
              &:last-child {
                border-bottom: none;
              }
              .other_group_title {
                font-size: 16* 0.3125vw;
                display: flex;
                height: 50* 0.3125vw;
                align-items: center;
              }
           
      
              .other_group_content {
                display: flex;
                flex-wrap: wrap;
                .other_item {
                  width: 75* 0.3125vw;
                  height: 35* 0.3125vw;
                  border: 1* 0.3125vw solid #ccc;
                  border-radius: 5* 0.3125vw;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-right: 18* 0.3125vw;
                  margin-bottom: 18* 0.3125vw;
                }
                .active{
                  background-color: #defaef;
                  color:#21b97a;
                  border-color: #21b97a;
                }
              }
            }
          }
          .other_main_btn {
            height: 50* 0.3125vw;
            display: flex;
            border-top: 1* 0.3125vw solid #ccc;
            span {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            span:nth-child(1) {
              color: #21b97a;
              flex: 1;
            }
            span:nth-child(2) {
              background-color: #21b97a;
              color: #fff;
              font-size: 16* 0.3125vw;
              flex: 2;
            }
          }
        }
      }
    }
  }
  .filter_mask{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top:0;
    left: 0;
    z-index: 1000;
    background-color: #000;
    opacity: .5;
  }
}
